
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>历史数据</title>
	<link href="style/css/bootstrap.min.css" rel="stylesheet">
	<link href="style/css/style.css" rel="stylesheet">
	<script src="style/js/jquery-1.11.0.min.js"></script>
	<script src="style/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid main">
		<div class="left">
			<div class="row logo">
				<div class="media">
				  	<div class="media-left">
				    	<a href="#">
				      		<img class="media-object logo-img" src="style/css/logo2.png" alt="瑞海科技">
				    	</a>
				  	</div>
				  	<div class="media-body">
				    	<p class="logo-name">瑞海科技</p>
				  </div>
				</div>
			</div>
			<div class="row">
                <ul id="manageList">
                    <li class="default active">
                        <div>
                            <img src="style/css/home1.png" alt="home">
                            <a href="home.html" id="home">首页</a>
                        </div>
                    </li>
                    <li class="default">
                        <div class="pull-left">
                            <img src="style/css/site2.png" alt="site">
                            <a href="site.html" id="site">站点</a>
                        </div>
                        <div class="toggle pull-right" onclick="isShow1()">
                            <img id="choose1" src="style/css/downArrow.png" alt="">
                        </div>
                        <div class="clearfix"></div>                            
                    </li>
                    <div id="sites">
                    	<div class="site-item">
	                        <a href="#" class="item checked">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>    
                    </div>
                    <li class="default">
                        <div>
                            <img src="style/css/history2.png" alt="history">
                            <a href="history.html" id="history">历史数据</a>
                        </div>                               
                    </li>
                    <li class="default">
                        <div class="pull-left">
                            <img src="style/css/userManage2.png" alt="admin">
                            <a href="userManage.html" id="userManage">后台管理</a>
                        </div>
                        <div class="toggle pull-right" onclick="isShow2()">
                            <img id="choose2" src="style/css/downArrow.png" alt="">
                        </div>
                        <div class="clearfix"></div>                               
                    </li>
                    <div id="manage">
                    	<div class="manage-item">
                            <img src="style/css/green.png" alt="user">
                            <a href="userManage.html" class="large-item checked">用户管理</a>
                        </div>
                        <div class="manage-item">
                            <img src="style/css/yellow.png" alt="site">
                            <a href="siteManage.html" class="large-item">站点管理</a>
                        </div>
                        <div class="manage-item device">
                        	<div class="pull-left">
	                            <img src="style/css/pink.png" alt="device">
                            	<a href="cameraManage.html" class="large-item">设备管理</a>
	                        </div>
	                        <div onclick="isShow3()">
	                            <img id="choose3" src="style/css/add.png" alt="add">
	                        </div>
	                        <div class="clearfix"></div>
                        </div>
                        <div id="device">
                        	<div class="device-item">
		                        <a href="cameraManage.html" class="small-item">摄像头</a>
		                    </div>
		                    <div class="device-item">
		                        <a href="senseManage.html" class="small-item">传感</a>
		                    </div>
                        </div>                        
                        <div class="manage-item">
                            <img src="style/css/gray.png" alt="admin">
                            <a href="publishAnnounce.html" class="large-item">发布公告</a>
                        </div>
                    </div>
                </ul>
            </div>
            <div class="row footer text-center">
				Copyright &copy; 2018 | &nbsp; 瑞海集团  版权所有 &nbsp;
			</div>
			<script type="text/javascript">
                $(document).ready(function(){ 
                    $("#manageList li a").each(function(){  
                        $this = $(this); 
                        var id2=$this.attr("id");
                        var src2="style/css/"+id2+"2.png";
                        $this.prev().attr("src",src2);
                        if($this[0].href==String(window.location)){ 
                            $("#manageList li").removeClass("active");
                            $this.parent().parent().addClass("active");
                            var id1=$this.attr("id");
                        	var src1="style/css/"+id1+"1.png";
                        	$this.prev().attr("src",src1);
                        } 
                    }); 
                    $("#sites div a").each(function(){  
                        $this = $(this);  
                        if($this[0].href==String(window.location)){
                        	$("#manageList li").removeClass("active");
                        	$("#manageList li:eq(1)").addClass("active"); 
                            $("#sites div a").removeClass("checked");
                            $this.addClass("checked");  
                        } 
                    });
                    $("#manage div a").each(function(){  
                        $this = $(this);  
                        if($this[0].href==String(window.location)){
                        	$("#manageList li").removeClass("active");
                        	$("#manageList li:eq(3)").addClass("active");
                        	console.log($("#manageList li:eq(3)")); 
                            $("#manage div a").removeClass("checked");
                            $this.addClass("checked");  
                        } 
                    });
                    number(); 
                });
                function isShow1(){
					var sites=document.getElementById('sites');
					$("#choose1").src="style/css/downArrow.png";
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(1)").addClass("active");
			        if(sites.style.display == 'none'){  
			            sites.style.display = 'block';
			            $('#choose1').attr('src', 'style/css/upArrow.png');
			        }else{
			            sites.style.display = 'none';
			            $('#choose1').attr('src', 'style/css/downArrow.png');
			        }
			    } 
			    function isShow2(){
					var manage=document.getElementById('manage');
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(3)").addClass("active");
			        console.log($("#manageList li:eq(3)")); 
			        if(manage.style.display == 'none'){  
			            manage.style.display = 'block';
			            $('#choose2').attr('src', 'style/css/upArrow.png');
			        }else{
			            manage.style.display = 'none';
			            $('#choose2').attr('src', 'style/css/downArrow.png');
			        }
			    }
			    function isShow3(){
					var device=document.getElementById('device');
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(3)").addClass("active");
			        console.log($("#manageList li:eq(3)")); 
			        if(device.style.display == 'none'){  
			            device.style.display = 'block';
			            $('#choose3').attr('src', 'style/css/reduce.png');
			        }else{
			            device.style.display = 'none';
			            $('#choose3').attr('src', 'style/css/add.png');
			        }
			    }  
            </script>
		</div>
		<div class="right">
			<div class="row header">
				<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
					<div class="row search">
						<input type="search" placeholder="请输入站点进行查询…" class="searchInput">
						<a href="#" class="searchLink"></a>
					</div>
				</div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-right">
                    <div class="row userMsg pull-right">
                    	<a href="#" class="bell" onclick="javasrcipt:ShowDiv2('warnMsg')"><img src="style/css/bell.png" alt="bell" class="bellImg"><span class="badge">7</span></a>
                        <a href="#" onclick="javasrcipt:ShowDiv('personalCenter','fade')">   
                    		<img src="style/css/people.png" alt="people">
                        	<span class="username">用户名</span>
                    	</a>
                        <a type="button" class="btn exit">安全退出</a>    
                    </div>                   
                </div> 
			</div>
			<div class="row welcome hidden-xs">
				<p class="msg pull-right">欢迎您使用！<span class="small">您最后一次登录时间为 02/01/2019 05:34:59 PM</span></p>
			</div>
			<div class="row historyMsg">
				<div class="row datetime">
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
						<div class="row">
							<span class="itemName">开始时间：</span>
							<input type="text" class="timeInput" placeholder="请选择..." id="startTime">
						</div>					
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
						<div class="row">
							<span class="itemName">结束时间：</span>
							<input type="text" class="timeInput" placeholder="请选择..." id="endTime">
						</div>					
					</div>
					<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
						<div class="row">
							<span class="itemName">报警类型：</span>
							<select class="typeSelect">
								<option class="" value="1">1</option>
								<option class="" value="2">2</option>
								<option class="" value="3">3</option>
							</select>
							<a class="historySearch">查询</a>
						</div>	
					</div>
				</div>
				<div class="row manages">
					<table class="col-lg-12 col-md-12 col-sm-12 col-xs-12 table table-bordered manageTable">
						<thead>
							<tr class="title">
								<th>序号</th>
								<th>报警名称</th>
								<th>报警类型</th>
								<th>报警级别</th>
								<th>报警内容</th>
								<th>报警时间</th>
								<th>视频流</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
							<tr>
								<td class="num"></td>
								<td>异常物体进入</td>
								<td>3</td>
								<td>2</td>
								<td>未佩戴安全帽</td>
								<td>2018/06/24   上午10:20:50</td>
								<td>rtmp://117.34.124.60:1935/live/live2</td>
							</tr>
						</tbody>
					</table>
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 page">
						<div class="col-lg-4 col-md-5 col-sm-12 col-xs-12">每页显示<span>13</span>条记录，共计<span>13</span>条记录</div>
						<div class="col-lg-6 col-md-7 col-sm-12 col-xs-12">
							<div class="col-lg-7 col-md-8 col-sm-6 col-xs-12">
								<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-right selected">共<span class="digital">2</span>页</div>
								<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-left">第<span class="digital digital2">1</span>页</div>
							</div>
							<div class="col-lg-5 col-md-4 col-sm-6 col-xs-12">
								<a href="#" class="prev selected">上一页</a>
								<a href="#" class="next">下一页</a>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
						<div class="row warn">
							<div class="row warnTitle">
								<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 warnName text-center">报警信息（月）统计图</div>
								<div class="col-lg-3 col-md-5 col-sm-5 col-xs-5 text-right">月份</div>
								<div class="col-lg-3 col-md-7 col-sm-7 col-xs-7">
									<div class="row">
										<select>
											<option class="" value="1">1</option>
											<option class="" value="2">2</option>
											<option class="" value="3">3</option>
											<option class="" value="4">4</option>
											<option class="" value="5">5</option>
											<option class="" value="6">6</option>
											<option class="" value="7">7</option>
											<option class="" value="8">8</option>
											<option class="" value="9">9</option>
											<option class="" value="10">10</option>
											<option class="" value="11">11</option>
											<option class="" value="12">12</option>
										</select>
									</div>	
								</div>
							</div>
							<div class="row" id="warnMonth"></div>
						</div>
					</div>
					<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
						<div class="row warn">
							<div class="row warnTitle">
								<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 warnName text-center">报警信息（季）统计图</div>
								<div class="col-lg-3 col-md-5 col-sm-5 col-xs-5 text-right">季度</div>
								<div class="col-lg-3 col-md-7 col-sm-7 col-xs-7">
									<div class="row">
										<select>
											<option class="" value="1">第一季度</option>
											<option class="" value="2">第二季度</option>
											<option class="" value="3">第三季度</option>
											<option class="" value="4">第四季度</option>
										</select>
									</div>	
								</div>
							</div>
							<div class="row" id="warnQuarter"></div>
						</div>
					</div>
					<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
						<div class="row warn">
							<div class="row warnTitle">
								<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 warnName text-center">报警信息（年）统计图</div>
								<div class="col-lg-3 col-md-5 col-sm-5 col-xs-5 text-right">年份</div>
								<div class="col-lg-3 col-md-7 col-sm-7 col-xs-7">
									<div class="row">
										<select>
											<option class="" value="1">2019</option>
											<option class="" value="2">2018</option>
											<option class="" value="3">2017</option>
											<option class="" value="4">2016</option>
											<option class="" value="5">2015</option>
											<option class="" value="6">2014</option>
										</select>
									</div>	
								</div>
							</div>
							<div class="row" id="warnYear"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="warnMsg" class="container-fluid warn_content">
		<div class="row">
			<a href="#">
				<span>监控</span>预警
				<span>2</span>条
				<img src="style/css/warn.png" alt="warn">
			</a>
		</div>
		<div class="row">
			<a href="">
				<span>传感</span>预警
				<span>5</span>条
				<img src="style/css/warn.png" alt="warn">
			</a>
		</div>
	</div>
	<div id="fade" class="black_overlay">
	</div>
	<div id="personalCenter" class="container-fluid white_content">
		<div class="row title">
			<span class="pull-left titleItem">个人中心</span>
			<a class="pull-right titleItem link"  onclick="CloseDiv('personalCenter','fade')">     
			  <img src="style/css/shut.png"/>  
			</a>
		</div>
		<div class="row content">
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">头像:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<a href="#" class="link"><img src="style/css/camera4.png"/></a>
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">用户名:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<input type="text" value="瑞海科技" class="input">
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">密码:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<input type="password" value="******" class="input">
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">站点:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8 siteContent">
					<div class="siteContentItem">云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,</div>
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">摄像头:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8 siteContent">
					<div class="siteContentItem">camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•</div>
				</div>
			</div>		
		</div>
		<div class="row">
			<div class="row date">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<sapn>创建日期:</span>
				</div>
				<div class="col-lg-10 col-md-9 col-sm-9">
					<div class="creatDate">2019-01-19</div>
				</div>
			</div>
			<div class="row date">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<span>修改日期:</span>
				</div>
				<div class="col-lg-10 col-md-9 col-sm-9">
					<div class="editDate">2019-01-24</div>
				</div>
			</div>
		</div>
		<div class="row btns text-center">
			<input type="submit" value="保存" class="save">
			<a href="#" class="cancel" onclick="CloseDiv('personalCenter','fade')">取消</a>
		</div>			
	</div>
	<script src="style/js/public.js"></script>
	<script src="style/js/highcharts.js"></script>
	<script src="style/js/laydate/laydate.js"></script>
	<script>
	    var startDate = laydate.render({
	        elem:'#startTime',
	        type: 'datetime',
	        format:'yyyy/MM/dd HH:mm:ss',
	        // value: '2010/01/01 00:00:00', //设置初始值
	        // btns: ['clear', 'now', 'confirm'],
	        btns: ['now', 'confirm'],
	        theme: '#3BC0C3',
	        done: function (value, date) {
	            endDate.config.min ={
	                year:date.year,
	                month:date.month-1, 
	                date: date.date,
	                hours:date.hours,
	                minutes:date.minutes,
	                seconds:date.seconds
	            };
	        }
	    })
	    var endDate = laydate.render({
	        elem:'#endTime',
	        type: 'datetime',
	        format:'yyyy/MM/dd HH:mm:ss',
	        btns: ['now', 'confirm'],
	        theme: '#3BC0C3',
	        done: function (value, date) {
	            startDate.config.max = {
	                year: date.year,
	                month: date.month - 1,
	                date: date.date,
	                hours:date.hours-1,
	                minutes:date.minutes-1,
	                seconds:date.seconds-1
	            }
	        }
	    })
	     function number(){
          	for(var i=0;i<$(".num").length;i++){
	      	$(".num").get(i).innerHTML = i+1;
         	}
     	}
		function allcheck() {
         	var nn = $("#allboxs").is(":checked"); //判断th中的checkbox是否被选中，如果被选中则nn为true，反之为false
         	if(nn == true) {
             	var namebox = $("input[name^='boxs']");  //获取name值为boxs的所有input
             	for(i = 0; i < namebox.length; i++) {
                 	namebox[i].checked=true;    //js操作选中checkbox
             	}
         	}
            if(nn == false) {
                var namebox = $("input[name^='boxs']");
                for(i = 0; i < namebox.length; i++) {
                    namebox[i].checked=false;
                }
            }
         }
     	// 报警信息月统计
		var chart1 = Highcharts.chart('warnMonth', {
			chart: {
				spacing : [40, 0 , 40, 0],
				backgroundColor: 'rgba(0,0,0,0)'
			},
			title: {
				text: ''
			},
			tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						format: '<b>{point.name}</b>: {point.percentage:.1f} %',
						// 通过 format 或 formatter 来格式化数据标签显示
						//format: '值: {point.y} 占比 {point.percentage} %',
						// formatter: function() {
						// 	//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
						// 	return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
						// }
						style: {
							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
						}

					},
					point: {
						events: {
							mouseOver: function(e) {  // 鼠标滑过时动态更新标题
								// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
								chart.setTitle({
									text: e.target.name+ '\t'+ e.target.y + ' %'
								});
							}
						}
					},
					showInLegend: true  // 显示在图例中
				}
			},
			legend: {//控制图例显示位置
	            layout: 'vertical',
		 		align: 'right',
	            x: -25,
	            verticalAlign: 'top',
	            y: -25,
	            itemStyle:  {color: '#02bbf1'},  //图例说明的样式
	            floating: true,
	            borderWidth:0,
	            shadow: false,
			    symbolPadding:10,// 图标后距
			    symbolRadius: 0,// 图标圆角
			    symbolWidth:4, // 图标宽度
	        },
			series: [{
				type: 'pie',
				innerSize: '80%',
				name: '报警信息月统计',
				data: [
					['a类',26.2],
					['b类',22.8],
					['c类',13.6],
					['d类',28.6]			
				]
			}],
			// 去除Highcharts.com链接
			credits: {  
		        enabled: false     //不显示LOGO 
		    } ,
		    // 去掉图片右上角的打印及导出按钮
			exporting:{ 
		         enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 
		    } 
		});
		 // 报警信息季度统计
		var chart2 = Highcharts.chart('warnQuarter', {
			chart: {
				spacing : [40, 0 , 40, 0],
				backgroundColor: 'rgba(0,0,0,0)'
			},
			title: {
				text: ''
			},
			tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						format: '<b>{point.name}</b>: {point.percentage:.1f} %',
						// 通过 format 或 formatter 来格式化数据标签显示
						//format: '值: {point.y} 占比 {point.percentage} %',
						// formatter: function() {
						// 	//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
						// 	return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
						// }
						style: {
							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
						}

					},
					point: {
						events: {
							mouseOver: function(e) {  // 鼠标滑过时动态更新标题
								// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
								chart.setTitle({
									text: e.target.name+ '\t'+ e.target.y + ' %'
								});
							}
						}
					},
					showInLegend: true  // 显示在图例中
				}
			},
			legend: {//控制图例显示位置
	            layout: 'vertical',
		 		align: 'right',
	            x: -25,
	            verticalAlign: 'top',
	            y: -25,
	            itemStyle:  {color: '#02bbf1'},  //图例说明的样式
	            floating: true,
	            borderWidth:0,
	            shadow: false,
			    symbolPadding:10,// 图标后距
			    symbolRadius: 0,// 图标圆角
			    symbolWidth:4, // 图标宽度
	        },
			series: [{
				type: 'pie',
				innerSize: '80%',
				name: '报警信息季度统计',
				data: [
					['a类',36.2],
					['b类',12.8],
					['c类',33.6],
					['d类',18.6]			
				]
			}],
			// 去除Highcharts.com链接
			credits: {  
		        enabled: false     //不显示LOGO 
		    } ,
		    // 去掉图片右上角的打印及导出按钮
			exporting:{ 
		         enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 
		    } 
		});
		// 报警信息年统计
		 var chart3 = Highcharts.chart('warnYear', {
			chart: {
				spacing : [40, 0 , 40, 0],
				backgroundColor: 'rgba(0,0,0,0)'
			},
			title: {
				text: ''
			},
			tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						format: '<b>{point.name}</b>: {point.percentage:.1f} %',
						// 通过 format 或 formatter 来格式化数据标签显示
						//format: '值: {point.y} 占比 {point.percentage} %',
						// formatter: function() {
						// 	//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
						// 	return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
						// }
						style: {
							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
						}

					},
					point: {
						events: {
							mouseOver: function(e) {  // 鼠标滑过时动态更新标题
								// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
								chart.setTitle({
									text: e.target.name+ '\t'+ e.target.y + ' %'
								});
							}
						}
					},
					showInLegend: true  // 显示在图例中
				}
			},
			legend: {//控制图例显示位置
	            layout: 'vertical',
		 		align: 'right',
	            x: -25,
	            verticalAlign: 'top',
	            y: -25,
	            itemStyle:  {color: '#02bbf1'},  //图例说明的样式
	            floating: true,
	            borderWidth:0,
	            shadow: false,
			    symbolPadding:10,// 图标后距
			    symbolRadius: 0,// 图标圆角
			    symbolWidth:4, // 图标宽度
	        },
			series: [{
				type: 'pie',
				innerSize: '80%',
				name: '报警信息年统计',
				data: [
					['a类',16.2],
					['b类',32.8],
					['c类',23.6],
					['d类',48.6]			
				]
			}],
			// 去除Highcharts.com链接
			credits: {  
		        enabled: false     //不显示LOGO 
		    } ,
		    // 去掉图片右上角的打印及导出按钮
			exporting:{ 
		         enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 
		    } 
		});
</script>
</body>
</html>